(function(){
  var uls = document.querySelector(".list_ul");
  var videoFr = document.querySelectorAll(".video_fr>div");
  var videoTopFr = document.querySelectorAll(".video_fr_top div");
  var catalogueDetails = document.querySelectorAll(".catalogueDetails div");
  var courseVideo_top = document.querySelectorAll(".courseVideo .main > div");
  catalogueDetails[0].style.color = "#fff";
  catalogueDetails[0].style.background = "#80C4AE";
  catalogueDetails[0].onclick = function () {
    courseVideo_top[1].style.display = "block";
    courseVideo_top[2].style.display = "none";
    catalogueDetails[0].style.color = "#fff";
    catalogueDetails[0].style.background = "#80C4AE";
    catalogueDetails[1].style.color = "#333";
    catalogueDetails[1].style.background = "";
  };
  catalogueDetails[1].onclick = function () {
    courseVideo_top[1].style.display = "none";
    courseVideo_top[2].style.display = "block";
    catalogueDetails[0].style.color = "#333";
    catalogueDetails[0].style.background = "";
    catalogueDetails[1].style.color = "#fff";
    catalogueDetails[1].style.background = "#80C4AE";
  };
  
  //渲染详情视频列表
  var content = "";
  for (var i = 0; i < classList.length; i++) {
    content += `<li>
    <h2>${classList[i].title}<i class=" icon icon-sanjiaoxing"></i> </h2>
    <div class="list_item">
        <ul>`;
    for (var j = 0; j < classList[i].list.length; j++) {
      var data = classList[i].list[j];
      content += `<li>
              <a href="javascript:void(0)" class="clearfix">
                <div class="fl icon icon-24gf-playCircle"></div>
                <div class="fl">${data.name}</div>
                <div class="fr">${data.time}</div>
                <span class="start fr">播放视频</span>
              </a>
            </li>`;
    }
    content += `</ul>
     </div>
    </li>`;
  }
  uls.innerHTML = content;
  var iElem = document.querySelectorAll(".courseVideo_list > ul > li > h2 > i");
  var items = document.querySelectorAll(".list_ul > li>div");
  var lis = document.querySelectorAll(".list_ul > li>div li a");
  for (var i = 0; i < iElem.length; i++) {
    //点击展示、隐藏视频列表
    iElem[i].index = i;
    iElem[i].tag = false;
    iElem[i].onclick = function () {
      this.tag = !this.tag;
      if (this.tag) {
        this.className = "icon icon-sanjiaoxing_shang";
        items[this.index].style.display = "block";
      } else {
        this.className = "icon icon-sanjiaoxing";
        items[this.index].style.display = "none";
      }
    };
  }
  for (var i = 0; i < lis.length; i++) {
    //鼠标经过显示播放按钮
    lis[i].index = i;
    lis[i].onmouseover = function () {
      this.children[2].style.display = "none";
      this.children[3].style.display = "block";
    };
    lis[i].onmouseout = function () {
      this.children[2].style.display = "block";
      this.children[3].style.display = "none";
    };
    //点击播放按钮
    lis[i].children[3].onclick = function () {
      if (localStorage.getItem("isLogin") != "true") {
        alert("请先登录!");
        var logon_register = document.querySelector(".logon_register"); //遮挡层
        logon_register.style.display = "block";
        var logon2 = document.querySelector(".logon"); //登录层
        var register2 = document.querySelector(".register"); //注册层
        register2.style.display = "none";
        logon2.style.display = "block";
      } else {
        window.location = "../html/play.html";
      }
    };
  }
  //点击展开全部
  var unfold = document.querySelector(".unfold a" );
  var list_item = document.querySelectorAll(".list_ul li .list_item");
  var show = false;
  unfold.onclick = function(){
    show = !show;
    if(show){
      for (var i = 0; i < list_item.length; i++) {
        list_item[i].style.display = "block";
      }
      unfold.innerHTML = "点击收起全部";
    }else{
      for (var i = 0; i < list_item.length; i++) {
        list_item[i].style.display = "none";
      }
      unfold.innerHTML = "点击展开查看全部";
    }
    
  }
})()